<script setup>
import { useUserStore } from '@/stores/user'
import { CountTo } from 'vue3-count-to'
import { useRouter } from 'vue-router'
import { ref, onMounted } from 'vue'
import { getCountApi, getHotApi, getVisitor } from '@/api/home'
// eacharts图表
import * as echarts from 'echarts'
const router = useRouter()
// 实例化仓库
const userStore = useUserStore()

// 渲染图标数据
onMounted(async () => {
  // 图表数据
  const res = await getHotApi()

  // 图表配置
  let options = {
    title: [{
      text: '文章热度',
      padding: [20, 0, 0, 44],
      textStyle: {
        fontWeight: 'bold',
        color: '#888e9f',
        fontSize: '13px'
      },
    },
    {
      text: '文章热度Top7统计图',
      left: 'center',
      padding: [10, 0, 0, 0],
      textStyle: {
        fontWeight: 'bold',
        color: '#000000',
        fontSize: '17px'
      },
    }
    ],
    tooltip: {},
    xAxis: [
      {
        type: 'category',
        data: res.data.titleList[0],
        axisTick: {
          alignWithLabel: true,
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#131f2b'
          },
          interval: 0,
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        axisLabel: {
          show: true,
          textStyle: {
            color: '#131f2b'
          }
        },
      },
    ],
    series: [
      {
        name: '文章热度',
        type: 'bar',
        barWidth: '40%',
        itemStyle: {
          barBorderRadius: [5, 5, 0, 0],
          color: '#8597b4',
        },
        data: res.data.hotList[0],
        realtimeSort: true
      }
    ],
  }
  // 实例化图标
  let echart = echarts.init(document.getElementById('articleEchart'))
  // 绘制图表
  echart.setOption(options)
})

onMounted(async () => {
  // 图表数据
  const res = await getVisitor()
  // 图表配置
  let options = {
    title: [{
      text: '访客数据',
      padding: [20, 0, 0, 24],
      textStyle: {
        fontWeight: 'bold',
        color: '#888e9f',
        fontSize: '13px'
      },
    },
    {
      text: '网站访客近7日统计图',
      left: 'center',
      padding: [10, 0, 0, 0],
      textStyle: {
        fontWeight: 'bold',
        color: '#000000',
        fontSize: '17px'
      },
    }
    ],
    tooltip: {},
    xAxis: [
      {
        type: 'category',
        data: res.data.timeList[0],
        axisTick: {
          alignWithLabel: true,
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#131f2b'
          },
          interval: 0,
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
        axisLabel: {
          show: true,
          textStyle: {
            color: '#131f2b'
          }
        },
      },
    ],
    series: [
      {
        name: '网站访客',
        type: 'line',
        barWidth: '40%',
        itemStyle: {
          barBorderRadius: [5, 5, 0, 0],
          color: '#8597b4',
        },
        data: res.data.countList[0],
        realtimeSort: true,
        smooth: true
      }
    ],
  }
  // 实例化图标
  let echart = echarts.init(document.getElementById('userEchart'))
  // 绘制图表
  echart.setOption(options)
})

const countMap = ref()
// 获取统计数量
const getCount = async () => {
  const res = await getCountApi()
  countMap.value = res.data
  console.log(countMap.value);
}
onMounted(() => {
  getCount()
})
// 跳转
const goToPath = (path) => {
  window.open(path)
}
</script>
<template>
  <div class="home-box">
    <div class="top-box">
      <div class="left-box">
        <!-- logo和描述信息 -->
        <div class="logo-desc">
          <!-- logo -->
          <div class="avatar-box">
            <img v-if="userStore.userInfo.photoUrl" :src="userStore.userInfo.photoUrl" alt="">
            <img v-else src="../../assets/images/c1105a00eacd48dea483bb16b9efc363H.png">
          </div>
          <!-- 描述信息 -->
          <div class="desc-box">
            <div class="desc">
              <h4>个人博客管理系统中心</h4>
              <div class="box">
                <span>测试版</span>
              </div>
            </div>
            <!-- TODO从后端请求过来 -->
            <div v-if="userStore.userInfo.photoUrl" class="div">
              管理员状态拥有全部操作权限
            </div>
            <div v-else class="div">
              访客状态拥有查看权限
            </div>
          </div>
        </div>
        <!-- 统计 -->
        <div class="count">
          <!-- 统计数量 -->
          <div class="count-item">
            <span>说说</span>
            <CountTo :start-val="0" :end-val="countMap?.talkCount" :duration="2000" />
          </div>
          <div class="count-item">
            <span>留言</span>
            <CountTo :start-val="0" :end-val="countMap?.messageCount" :duration="2000" />
          </div>
          <div class="count-item">
            <span>文章</span>
            <CountTo :start-val="0" :end-val="countMap?.articleCount" :duration="2000" />
          </div>
          <div class="count-item">
            <span>分类</span>
            <CountTo :start-val="0" :end-val="countMap?.categoryCount" :duration="2000" />
          </div>
          <div class="count-item">
            <span>标签</span>
            <CountTo :start-val="0" :end-val="countMap?.labelCount" :duration="2000" />
          </div>
          <div class="count-item">
            <span>用户</span>
            <CountTo :start-val="0" :end-val="countMap?.userCount" :duration="2000" />
          </div>
          <div class="count-item">
            <span>相册</span>
            <CountTo :start-val="0" :end-val="countMap?.photoCount" :duration="2000" />
          </div>
          <div class="count-item">
            <span>访问量</span>
            <CountTo :start-val="0" :end-val="countMap?.requestCount" :duration="2000" />
          </div>
        </div>
      </div>
      <div class="right-box">
        <div class="left">
          <h4>主要技术</h4>
          <!-- Vue3 element-plus springboot minio redis ElasticSearch-->
          <div class="help-block" @click="goToPath('https://cn.vuejs.org/')">
            <i class="iconfont icon-Vue" style="color: #41b883;font-size: 18px;margin-left: 7px;"></i>
            Vue3
          </div>
          <div class="help-block" @click="goToPath('https://element-plus.org/zh-CN/component/calendar.html')">
            <i class="iconfont icon-a" style="margin: 0 0 0 0;color: #70b6ff;font-size: 20px;"></i>
            Element-Plus
          </div>
          <div class="help-block" @click="goToPath('https://spring.io/projects/spring-boot')">
            <i class="iconfont icon-SPRINGBOOT" style="color: #66a83c;"></i>
            SpringBoot
          </div>
          <div class="help-block" @click="goToPath('https://www.minio.org.cn/')">
            <i class="iconfont icon-MinIO" style="color: #c72c48;font-size: 20px;"></i>
            Minio
          </div>
          <div class="help-block" @click="goToPath('https://redis.net.cn/#google_vignette')">
            <i class="iconfont icon-Redis" style="color: #bc1915;margin-right: 8px;margin-left: 7px;"></i>
            Redis
          </div>
          <div class="help-block" @click="goToPath('https://www.elastic.co/cn/elasticsearch')">
            <i class="iconfont icon-icon_es" style="color: #fec514;"></i>
            ElasticSearch
          </div>
        </div>
        <div class="right">
          <el-calendar />
        </div>
      </div>
    </div>
    <div class="bootom-box">
      <div class="kj">
        <!-- 写死 -->
        <div class="kj-box">
          <h4>快捷入口</h4>
          <div class="box" style="display: flex;">
            <div class="icon-box" @click="router.push('/talk')">
              <div class="icon" style="background-color:#409eff;">
                <i class="iconfont icon-shuoshuo"></i>
              </div>
              <p>说说管理</p>
            </div>
            <div class="icon-box" @click="router.push('/message')">
              <div class="icon" style="background-color: #575b66;">
                <i class="iconfont icon-liuyan"></i>
              </div>
              <p>留言管理</p>
            </div>
            <div class="icon-box" @click="router.push('/link')">
              <div class="icon" style="background-color: #72d9d0;">
                <i class="iconfont icon-youqinglianjie"></i>
              </div>
              <p>友链管理</p>
            </div>
            <div class="icon-box" @click="router.push('/article/pigeonhole')">
              <div class="icon" style="background-color: #2752fb;">
                <i class="iconfont icon-16"></i>
              </div>
              <p>归档管理</p>
            </div>
            <div class="icon-box" @click="router.push('/article/category')">
              <div class="icon" style="background-color: #feab3f;">
                <i class="iconfont icon-fenlei"></i>
              </div>
              <p>分类管理</p>
            </div>
            <div class="icon-box" @click="router.push('/article/label')">
              <div class="icon" style="background-color: #8f9bb3;">
                <i class="iconfont icon-biaoqian"></i>
              </div>
              <p>标签管理</p>
            </div>
          </div>
        </div>
        <div class="top">
          <p>该网站于2024年5月25日开始进入开发阶段在2024年7月11日开发完成经过测试上线啦</p>
        </div>
      </div>
      <!-- 文章热度数据图 -->
      <div class="echart-bo">
        <div class="left-bo">
          <!-- 不会被销毁 -->
          <keep-alive>
            <div id="articleEchart" style="width: 800px;height: 300px;"></div>
          </keep-alive>
        </div>
        <div class="right-box">
          <div id="userEchart" style="width: 600px;height: 300px;"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.home-box {
  width: 1325px;
  height: 675px;

  .bootom-box {
    width: 100%;
    height: 57%;
    border-radius: 5px;

    .echart-bo {
      display: flex;
      margin-top: 6px;
      width: 100%;
      height: 255px;

      .left-bo {
        border-radius: 5px;
        width: 58%;
        height: 100%;
        background-color: #fff;
      }

      .right-box {
        margin-left: 6px;
        border-radius: 5px;
        width: 550px;
        height: 100%;
        background-color: #fff;
      }
    }

    .kj {
      padding: 10px 20px 0 20px;
      margin-top: 6px;
      width: 55%;
      height: 110px;
      background-color: #fff;
      border-radius: 5px;

      .kj-box {
        display: flex;
        flex-direction: column;

        .icon-box {
          margin-right: 30px;
          width: 70px;
          margin-top: 10px;
          display: flex;
          flex-direction: column;
          align-items: center;

          &:hover {
            cursor: pointer;
          }

          .icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 45px;
            height: 45px;
            text-align: center;
            border-radius: 10px;

            i {
              margin-right: 26px;
              font-size: 20px;
              color: #ffffff;
            }


          }

          p {
            margin-top: 3px;
            color: #888e9f;
            font-size: 13px;
          }
        }
      }
    }

    .top {
      width: 550px;
      border-radius: 3px;
      height: 25px;
      background-color: #fff;
      left: 755px;
      top: -8px;
      display: flex;
      align-items: center;
      position: relative;

      p {
        position: absolute;

        margin-left: 10px;
        font-size: 14px;
        color: #888e9f;

      }
    }
  }

  .top-box {
    width: 100%;
    height: 43%;
    display: flex;
    justify-content: space-between;

    .right-box {
      width: 41.5%;
      height: 390px;
      background-color: #fff;
      border-radius: 5px;
      display: flex;

      .left {
        padding: 20px;
        width: 30%;
        height: 100%;

        .help-block {
          display: flex;
          align-items: center;
          justify-content: start;
          margin-top: 10px;
          width: 180px;
          height: 45px;
          background-color: #f5f6f8;
          border-radius: 8px;

          &:hover {
            background-color: #fff;
          }

          i {
            margin: 0 5px 0 5px;
            padding: 0;
          }


          &:hover {
            cursor: pointer;
          }
        }
      }

      .right {
        padding: 10px;
        width: 80%;
        height: 280px;

        ::v-deep .el-calendar-day {
          height: 45px;
        }


        ::v-deep .el-calendar-table__row td,
        ::v-deep .el-calendar-table tr td:first-child,
        ::v-deep .el-calendar-table__row td.prev {
          border: none;
        }
      }

    }

    .left-box {
      width: 58%;
      height: 100%;
      background-color: #fff;
      border-radius: 5px;

      .count {
        display: flex;
        flex-wrap: wrap;
        height: 200px;
        padding: 0 20px 0 20px;

        .count-item {
          margin-right: 100px;
          display: flex;
          flex-direction: column;
          font-weight: bold;

          span:nth-child(1) {
            font-size: 15px;
            color: #a8adb9;
          }

          span:nth-child(2) {
            margin-top: 8px;
            font-size: 22px;
            color: #393d50;
            font-weight: bold;
          }
        }
      }

      .logo-desc {
        display: flex;
        padding: 20px;


        .desc-box {
          .desc {
            display: flex;
            align-items: center;

            h4 {
              margin-left: 10px;
              color: #000000;
              font-weight: 700;
            }

            .box {
              margin-left: 6px;
              width: 50px;
              background-color: #f5f6f8;
              text-align: center;
              line-height: 15px;

              span {
                font-size: 13px;
                color: #a0a4b2;
              }
            }
          }

          .div {
            margin-top: 6px;
            margin-left: 13px;
            font-size: 12px;
            color: #888e9f;
          }
        }

        .avatar-box {
          width: 44px;
          height: 44px;
          border: 1px solid #eaeef2;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 5px;

          img {
            width: 40px;
            height: 40px;
          }
        }
      }
    }


  }
}
</style>